import { toggleAlphaTween, createHomeBg, isDev } from '../utils/index';
import { ScreenConfig } from './types';
import GamesScene from './games';
import LoaderScene from './loader';
import ConfirmScene from './confirm';

class MainScene extends Phaser.Scene {
  constructor() {
    super({ key: 'MainScene' });
  }

  bg: Phaser.GameObjects.Container;

  hand_group: Phaser.GameObjects.Container;

  camerasScrollY = 0;

  isStart = false;

  screen_1: ScreenConfig;

  screen_2: ScreenConfig;

  screen_3: ScreenConfig;

  screen_4: ScreenConfig;

  screen_5: ScreenConfig;

  screen_6: ScreenConfig;

  screen_7: ScreenConfig;

  screen_8: ScreenConfig;

  screen_9: ScreenConfig;

  screen_10: ScreenConfig;

  screen_11: ScreenConfig;

  screen_12: ScreenConfig;

  screen_13: ScreenConfig;

  screen_14: ScreenConfig;

  screen_15: ScreenConfig;

  screen_16: ScreenConfig;

  screen_17: ScreenConfig;

  screen_18: ScreenConfig;

  screen_19: ScreenConfig;

  screen_20: ScreenConfig;

  screen_21: ScreenConfig;

  screen_22: ScreenConfig;

  screen_23: ScreenConfig;

  screen_24: ScreenConfig;

  screen_25: ScreenConfig;

  screen_26: ScreenConfig;

  screen_27: ScreenConfig;

  screen_28: ScreenConfig;

  screen_29: ScreenConfig;

  screen_30: ScreenConfig;

  screen_31: ScreenConfig;

  screen_32: ScreenConfig;

  screen_33: ScreenConfig;

  screen_end: ScreenConfig;

  init() {
    this.bg = createHomeBg(this);
    this.bg.setDepth(100);
    LoaderScene.init(this);
  }

  preload() {
    LoaderScene.preload(this, () => {
      GamesScene.init(this);
    });
  }

  create() {
    document.addEventListener('touchstart', this.touchstart);
    document.addEventListener('touchend', this.touchend);

    console.time('create');

    LoaderScene.create(this, () => {
      ConfirmScene.init(this);
      ConfirmScene.create(this);
    });

    if (isDev) {
      this.start();
    }

    console.timeEnd('create');
  }

  update() {
    if (!this.isStart) return;
    GamesScene.update(this);
  }

  start() {
    ConfirmScene.next();
    toggleAlphaTween({
      scene: this,
      targets: [this.bg],
      alpha: 0,
      duration: 500,
      onComplete: () => {
        this.bg.destroy();
        this.hand_group = GamesScene.createHand(this);
        GamesScene.create(this);
        this.isStart = true;
      },
    });
  }

  touchstart = (e: TouchEvent) => {
    ConfirmScene.isDoubleTouch = e.touches.length >= 2;
  };

  touchend = () => {
    if (!ConfirmScene.isDoubleTouch) return;

    toggleAlphaTween({ scene: this, targets: [ConfirmScene.g1_light], alpha: 1 });
    toggleAlphaTween({
      scene: this,
      targets: [ConfirmScene.home_arrows, ConfirmScene.icon_hand, ConfirmScene.text],
      duration: 1000,
      alpha: 0,
    });
    this.tweens.add({
      targets: ConfirmScene.g1_light,
      repeat: -1,
      props: { angle: 90 },
    });
    this.tweens.add({
      targets: ConfirmScene.g1_luohu,
      props: { scale: 2 },
      duration: 1000,
      onComplete: () => {
        this.start();
      },
    });

    document.removeEventListener('touchstart', this.touchstart);
    document.removeEventListener('touchend', this.touchend);
  };
}

export default MainScene;
